import { useEffect } from "react";
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";


const App = () => {
  useEffect(() => {
    const scene = new THREE.Scene();
    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 200;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 0, 500);
    camera.lookAt(scene.position)

    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement)

    const ambientLight = new THREE.AmbientLight(0x444444);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xabcdef, 1)
    directionalLight.position.set(400, 300, 500)
    scene.add(directionalLight);

    function render() {
      renderer.render(scene, camera);

    }
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      render()
    })

    // const geometry = new THREE.BoxGeometry(100, 100, 100) // 立方体
    // const geometry = new THREE.CylinderGeometry(100, 100, 150, 32) // 柱体
    const geometry = new THREE.DodecahedronGeometry(100, 32);
    

    const material = new THREE.MeshLambertMaterial({
      color: 0xabcd33,
      side: THREE.DoubleSide
    })

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    render()

  }, [])
}

export default App;